<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>关于我们</title>
<link rel="stylesheet" href="__HOME__/css/public_style.css">
<style>
	html,body{width:100%;height:100%;}
	body{background-color:#4667ec;}
	/*-- 返回 --*/
	.ding_bg{
		height:52px;
		background-image: -moz-linear-gradient( 0deg, rgb(27,85,203) 0%, rgb(109,118,254) 100%);
		background-image: -webkit-linear-gradient( 0deg, rgb(27,85,203) 0%, rgb(109,118,254) 100%);
		background-image: -ms-linear-gradient( 0deg, rgb(27,85,203) 0%, rgb(109,118,254) 100%);
	}
	.ding_bg>p{text-align:center;color:#fff;float:left;width:calc(100% - 104px);line-height:52px;}
	.fanhui{padding:20px;height:12px;width:12px;display:block;float:left;}
	.fanhui>div{border-top:2px solid #fff;border-left:2px solid #fff;height:10px;width:10px;transform:rotate(-45deg);}
	/*-- 返回 --*/
	/*-- 顶部图片 --*/
	.top_img{position:relative;}
	.top_img img{width:100%;}
	.top_img>ul{position:relative;}
	.top_img>ul>li{float:left;}
	.top_img>ol{position:absolute;height:10px;bottom:8px;transform:translateX(-50%);left:50%;}
	.top_img>ol>li{float:left;width:10px;margin:0 5px;height:10px;border-radius:50%;background-color:rgba(255,255,255,.4);}
	.abo_dian{background-color:rgba(255,255,255,1)!important;}
	
	.top_img>div{
		width:120px;height:40px;background-color:#ff2965;border-top-right-radius:10px;border-bottom-left-radius:10px;position:absolute;
		font-size:18px;text-align:center;line-height:40px;color:#fff;left:20px;bottom:-20px;
	}
	/*-- 顶部图片 --*/
	/*-- 底部内容 --*/
	.bottom_cont{padding:30px;}
	.bottom_cont>pre{white-space: pre-wrap;word-wrap: break-word;color:#fff;line-height:24px;}
	/*-- 底部内容 --*/

</style>
</head>

<body>
	<!-- 返回 -->
	<div class="ding_bg">
		<a href="{:url('personal')}" class="fanhui"><div></div></a>
		<p>关于我们</p>
		<h6 class="clearfix"></h6>
	</div>
	<!-- 返回 -->
	<!-- 顶部图片 -->
	<div class="top_img">
		<ul>
			<li><img src="__HOME__/img/about_banner01.jpg" alt=""></li>
			<li><img src="__HOME__/img/about_banner01.jpg" alt=""></li>
			<li><img src="__HOME__/img/about_banner01.jpg" alt=""></li>
			<h6 class="clearfix"></h6>
		</ul>
		<ol>
			<h6 class="clearfix"></h6>
		</ol>
		<div>阳泉返利网</div>
	</div>
	<!-- 顶部图片 -->
	<!-- 底部内容 -->
	<div class="bottom_cont">
		<pre>       关于阳泉返利网内容就在这里，关于阳泉返利网内容就在这里，
       关于阳泉返利网内容就在这里，关于阳泉返利网内容就在这里，关于阳泉返利网内容就在这里，关于阳泉返利网内容就在这里，关于阳泉返利网内容就在这里，关于阳泉返利网内容就在这里，关于阳泉返利网内容就在这里，关于阳泉返利网内容就在这里，</pre>
	</div>
	<!-- 底部内容 -->

</body>
<script src="__HOME__/js/jquery-3.3.1.js"></script>
<script>
	$(document).ready(function(){
		var about_ban = $(".top_img>ul>li").length;
		$(".top_img>ul").width(about_ban * 100 + "%");
		$(".top_img>ul>li").width(100 / about_ban + "%");
		var b = 20 * about_ban;
		$(".top_img>ol").width(b);
		var ban_str = "";
		for(var a = 0;a < about_ban;a++){
			if(a === 0){
				ban_str+="<li class='abo_dian'></li>";
			}else{
				ban_str+="<li></li>";
			}
		}
		$(".top_img>ol").prepend(ban_str);
		
		clearInterval(about_t);
		var about_t = setInterval(function(){abo_ban()},3000);
		var i = 1;
		//banner滚动
		function abo_ban(){
			if(i >= about_ban){i = 0;}
			var b = -100 * i + "%"
			$(".top_img>ul").animate({left:b});
			$(".abo_dian").removeClass("abo_dian");
			$(".top_img>ol>li").eq(i).addClass("abo_dian");
			i++;
		}
	})
</script>
</html>
